<template>
  <div class="box buy">
    <header class="header">
      <van-nav-bar
        title="确认订单"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      />
    </header>
    <div class="content">
      <div class="address">
        <van-cell-group @click="addressShow=true">
          <van-cell>
          <p>{{mRAddress.name}} {{mRAddress.tel}}</p>
          <p><van-tag  plain type="danger">默认</van-tag>{{mRAddress.address}}</p>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="shop">
        <header><van-icon name="shop-o" />店名</header>
        <van-card
          :price="proList.price"
          :desc="proList.introduce"
          :title="proList.proName"
          :thumb="proList.proImg">
          <template #num>
            <van-stepper v-model="num" theme="round" button-size="22" max="999" :name="proList.proId" />
          </template>
        </van-card>
        <div class="tuihuoIntro">
          <span class="ico">7</span>
          <span>支持7天无理由退货</span>
          <span  class="ico">i</span>
          <span @click="priceInfoShow=true">价格说明</span>
        </div>
        <div class="pub" style="position: relative;padding-right: 0.3rem;">
          <div class="others">
            <p class="bl">配送</p>
            <p class="bl">快递运输</p>
          </div>
          <div class="others">
            <p class="gr">中小件配送时间</p>
            <p class="gr">预计。。。。。。送达</p>
          </div>
          <van-icon class="youbiao" name="arrow" />
        </div>
        <div class="others pub">
          <p>
            <span class="bl">退货无忧</span>&nbsp;
            <span class="gr">退换货可获运费赔付或免费取件&nbsp;<van-icon name="info" @click="tuihuoInfoShow=true" /></span>
          </p>
          <p class="re">商家赠送</p>
        </div>
        <div class="others pub">
          <p class="bl">选填</p>
          <p class="gr">给商家留言</p>
        </div>
      </div>
      <div class="price">
        <div class="pub others">
          <span class="bl">商品总额</span>
          <span class="bl">￥{{proList.price*num}} 元</span>
        </div>
        <div class="pub others">
          <p class="bl">
            运费
            <span class="gr">(总重：)</span>
          </p>
          <p class="re">运费</p>
        </div>
        <div class="pub others van-hairline--bottom" style="position: relative;padding-right: 0.3rem;">
          <span class="bl">礼品卡</span>
          <span class="gr">礼品卡数量</span>
          <van-icon class="youbiao" name="arrow" />
        </div>
        <div class="pub others" style="justify-content: flex-end;">
          <span class="bl">总计:&nbsp;￥</span>
          <span class="re" style="font-weight: 600;">{{proList.price*num}}元</span>
        </div>
      </div>
      <div class="fapiao">
        <div class="pub others" style="padding-right: 0.3rem;">
          <span class="bl">发票</span>
          <span class="gr">电子发票(商品明细-个人)</span>
          <van-icon class="youbiao" name="arrow" />
        </div>
      </div>
      <div class="pay">
        <div @click="$router.push('/home')">去买更多</div>
        <div @click="weiXinP">在线支付</div>
      </div>
    </div>
    <div class="tanchuang">
      <van-popup v-model="priceInfoShow">
        <h3>价格说明</h3>
        <small class="gr">因可能存在系统缓存、页面更新导致价格变动异常等不确定性情况出现，商品售价以本结算页商品价格为准；</small>
        <van-button type="danger" @click="priceInfoShow=false" round >知道了</van-button>
      </van-popup>
      <van-popup v-model="tuihuoInfoShow">
        <h3>退货无忧说明</h3>
        <p class="gr">1、如果您在购买京东自营商品时选择了退换无忧服务，那么该订单在7天内退货、15天内换货时，可以享受1次上门取件服务，此服务不再单独收费且此服务不影响商品的七天无理由退货政策。如果该订单内包含多件商品，该服务不限制具体商品数量，但是限制使用此服务的次数为1次；</p>
        <p class="gr">2、如果您申请上门取件的地址超出了京东上门取件的范围，需要您自行委托第三方配送，在您提供有效快递单号和费用凭证，并经京东审核通过后，您支付的运费将以余额的形式按照《非客户原因退换货逆向运费补偿标准》返还您相应的费用。</p>
        <van-button type="danger" @click="tuihuoInfoShow=false" round >知道了</van-button>
      </van-popup>
      <van-popup v-model="payShow"><img :src="erWeiMa" alt="">付款{{proList.price*num}}元</van-popup>
      <van-popup v-model="addressShow" position="top">
        <van-cell v-for="(val,idx) in address" :key="idx" @click="updateAddress(val)">
        <p>{{val.name}} {{val.tel}}</p>
        <p><van-tag  plain type="danger" v-show="val.isDefault">默认</van-tag>{{val.address}}</p>
        </van-cell>
      </van-popup>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, CellGroup, Cell, Tag, ContactCard, Card, Icon, Stepper, Popup, Button } from 'vant'
import { getDetail, weixinPay, getAddress, addOrder } from '../../api/index.js'
Vue.use(NavBar)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Tag)
Vue.use(ContactCard)
Vue.use(Card)
Vue.use(Icon)
Vue.use(Stepper)
Vue.use(Popup)
Vue.use(Button)
export default {
  data () {
    return {
      addressShow: false,
      address: [],
      mRAddress: {},
      num: 1,
      priceInfoShow: false,
      tuihuoInfoShow: false,
      proList: [],
      payShow: false,
      erWeiMa: ''
    }
  },
  props: ['id'],
  mounted () {
    getDetail({
      userId: localStorage.getItem('userId'),
      proId: this.id
    }).then(res => {
      console.log(res.data.data)
      this.proList = res.data.data[0]
    })
    getAddress({
      userId: localStorage.getItem('userId')
    }).then(res => {
      this.address = res.data.data.addData
      console.log(res.data.data)
      var i
      this.address.some((val, idx) => {
        i = idx
        return val.isDefault
      })
      this.mRAddress = this.address[i]
      console.log(this.mRAddress)
    })
  },
  methods: {
    weiXinP () {
      this.payShow = true
      weixinPay({
        body: 'jiang',
        out_trade_no: parseInt(Math.random() * 1000000000),
        total_fee: 1
      }).then(res => {
        this.erWeiMa = res.data.data
        addOrder({
          userId: localStorage.getItem('userId'),
          proData: this.proList
        }).then(res => {
          console.log(res)
        })
      })
    },
    updateAddress (val) {
      this.mRAddress = val
      this.addressShow = false
    }
  }
}
</script>

<style lang="scss">
*{
  padding:0;
  border: none;
  margin: 0;
  }
.buy{
  background-color: #F7F7F7;
  .pub{
    padding:0.15rem 0;
    position: relative;
  }
  .others{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .pay{
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border-radius: 0.1rem;
    padding:0.1rem 0;
    div{
      height: 0.4rem;
      width: 80%;
      text-align: center;
      border-radius: 0.2rem;
      line-height: 0.4rem;
    }
    div:nth-child(1){
      color: #0f8783;
      background: #bbebe9;
      box-shadow: 0 3px 6px 0 rgba(0,223,214,.2);
    }
    div:nth-child(2){
      color: #fff;
      background: #3884ff;
      box-shadow: 0 3px 6px 0 rgba(0,58,152,.2);
      margin-top: 0.1rem;
    }
  }
  .re{
    color: #f2270c;
    font-size: 12px;
  }
  .bl{
    font-weight: 400;
    font-size: 0.14rem;
  }
  .youbiao{
    position: absolute;
    right: 0;
    top:0.2rem;
  }
  .gr{
    color: #999;
    font-size: 0.12rem;
    margin-bottom: 0.1rem;
  }
  .tanchuang{
    .van-popup.van-popup--center{
      background: #f7f7f7;
      padding: 0.2rem;
      width: 70%;
      h3{
        margin-bottom: 0.1rem;
        text-align: center;
      }
      .van-button{
      margin-top: 0.1rem;
      width: 100%;
      }
    }
  }
  .address{
    border-bottom: 0.1rem solid orangered;
    p:nth-child(1){
      font-size: 0.16rerm;
      font-weight: 600;
    }
    p:nth-child(2){
      color: #666;
      font-size: 0.14rem;
    }
  }
  .shop, .price, .fapiao{
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    padding: 0.12rem 0.1rem;
    background: #fff;
    position: relative;
    border-radius: 0.1rem;
    header{
      font-size: 0.14rem;
      font-weight: 700;
      padding: 0 0.1rem;
    }
    .van-card{
      background: #fff;
    }
    .tuihuoIntro{
      text-align: center;
      span{
        font-size: 0.12rem;
        color: #999;
      }
      .ico{
        border-radius: 50%;
        border: 1px solid #6FAFFC;
        color:#6FAFFC;
        width:0.12rem;
        height:0.12rem;
        display: inline-block;
        text-align: center;
        margin-left: 0.05rem;
      }
    }
  }
}
</style>
